<template>
    <div class="layout-wrapper">
        <div class="top">
            <div class="tabs" v-if="$slots.tabs">
                <slot name="tabs"></slot>
            </div>
            <!-- 按钮块 -->
            <div class="buttons" v-if="$slots.buttons">
                <slot name="buttons"></slot>
            </div>
            <!-- 列表块 -->
            <div class="list">
                <slot></slot>
            </div>
        </div>
        <!-- 分页块 -->
        <div class="page">
            <!-- 加组件 -->
        </div>
    </div>
</template>

<script>
    export default {
        name:"Layout"
    }
</script>

<style lang="scss" scoped>
.layout-wrapper{
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .top{
        flex: 1;
        max-height: 100%;
        overflow: auto;
        background: white;
         .buttons{
            padding:16px 10px;
         }
    }
   
    .page{
        padding: 10px 5px;
        border-top: 1px solid rgb(222,226,238);
    }
}
</style>